import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:hockey/jzx_apps.dart';
import 'package:hockey/pages/jzx_posts/controller.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

class JzxImagesView extends StatelessWidget {
  const JzxImagesView(this.controller, this.onTap, {super.key});

  final JzxPostsController controller;

  final VoidCallback? onTap;

  @override
  Widget build(BuildContext context) {
    return JzxBlurView(
      blur: 40,
      backgroundColor: const Color(0x80000000),
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(8),
        topRight: Radius.circular(8),
      ),
      child: Container(
        padding: const EdgeInsets.all(24),
        height: 590.w,
        decoration: const BoxDecoration(
          // borderRadius: BorderRadius.circular(8),
          gradient: LinearGradient(colors: [
            Color(0x553FE1D8),
            Color(0x5563FF6A),
          ]),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            InkWell(
              onTap: () {
                Get.back();
              },
              child: Assets.images.icImagesClose.image(width: 28.w),
            ),
            Container(
              height: 40.w,
              margin: const EdgeInsets.only(bottom: 20, top: 12),
              padding: EdgeInsets.symmetric(horizontal: 12.w),
              decoration: BoxDecoration(
                color: const Color(0x33FFFFFF),
                borderRadius: BorderRadius.circular(6),
              ),
              // alignment: Alignment.topLeft,
              child: CupertinoTextField(
                controller: controller.title,
                placeholder: 'Type your title...',
                maxLength: 500,
                placeholderStyle: const TextStyle(color: Color(0x80FFFFFF)),
                padding: EdgeInsets.zero,
                maxLines: null,
                decoration: const BoxDecoration(color: Colors.transparent),
                style: TextStyle(
                  fontSize: 12.sp,
                  color: Colors.white,
                ),
              ),
            ),
            //
            Expanded(
              child: Obx(() => GridView.builder(
                    padding: EdgeInsets.zero,
                    // shrinkWrap: true,
                    // physics: const NeverScrollableScrollPhysics(),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3,
                      crossAxisSpacing: 16,
                      mainAxisSpacing: 16,
                      childAspectRatio: 94 / 116,
                    ),
                    itemCount: controller.images.length + 1,
                    itemBuilder: (context, index) {
                      if (controller.images.length == index ||
                          controller.images.isEmpty) {
                        return index >= controller.maxCount
                            ? const SizedBox.shrink()
                            : InkWell(
                                onTap: () {
                                  controller.pickerImages(context);
                                },
                                child: Assets.images.icImagesAdd.image(),
                              );
                      }
                      return Stack(
                        children: [
                          Positioned.fill(
                            child: ClipRRect(
                              borderRadius: BorderRadius.circular(6),
                              child: AssetEntityImage(
                                controller.images.value[index],
                                isOriginal: false,
                                fit: BoxFit.cover,
                              ),
                            ),
                          ),
                          Positioned(
                            right: 0,
                            bottom: 0,
                            child: InkWell(
                              onTap: () {
                                controller.removeImage(index);
                              },
                              child: Assets.images.icImagesDel.image(),
                            ),
                          )
                        ],
                      );
                    },
                  )),
            ),

            InkWell(
              onTap: onTap,
              child: Assets.images.icPostSubmit
                  .image(width: double.infinity)
                  .paddingOnly(bottom: 45.w),
            ),
          ],
        ),
      ),
    );
  }
}
